<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <my-book></my-book>
        <my-button type="primary" value="注册" ></my-button>
        <my-button type="info" value="登录" ></my-button>
        <hr/>
        <my-text label="用户名"></my-text>
        <my-text label="年龄"></my-text>
        <hr/>
        <input type="text"  v-focus >
    </div>
</body>

</html>
<script src="./js/vue.global.js"></script>
<script>
    const { createApp, defineAsyncComponent } = Vue;

    // 1、定义插件的基本格式
    let book = {
        template:`<div>book组件</div>`
    }

    let button={
        props:["type","value"],
        data(){
            return {
                obj:{
                    primary:"width:80px;height:40px;background-color:blue",
                    info:"width:80px;height:40px;background-color:green",
                }                
            }
        },
        template:`
            <div>
                <input type="button" :value="value" :style="obj[type]"  />
            </div>
        `
    }
    
    let text={
        props:["label"],
        template:`
            <div>
                <span v-if="label">{{label}}：</span><input type="text" />
            </div>
        `
    }

    // 定义插件
    let myvant = {
        install(app){
            console.log("install");
            console.log("app",app);
            // 给app全局注册一个组件book
            app.component("my-book",book);
            app.component("my-button",button);
            app.component("my-text",text);
            app.directive("focus",{
                mounted:(el)=>{
                    el.focus();
                }
            });
        }
    }

    
    let app = createApp({
       
    })

    app.use(myvant);

    app.mount("#app");



</script>